<!doctype html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KPlayer</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/overrall.min.css">
<link rel="stylesheet" href="css/video-js.min.css">
<link rel="icon" type="image/x-icon" href="css/player.png" />
<!--[if lt IE 9]>
      <script type="text/javascript" src="js/videojs-ie8.min.js"></script>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
<![endif]-->
</head>

<body>
	<div class="container">

		<div class="row">
			<div class="col-md-12">
				<div class="titlebox">
					<span class="titletext"><em> 青阳网络视频播放器 <small><span
								class="graytext">KIFT-Player</span></small></em></span>
					<button class="btn btn-link rightbtn" onclick="reMainPage()">
						关闭 <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
					</button>
				</div>
				<hr />
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<p class="subtitle">
					视频名称：<span id="vname">加载中...</span>
				</p>
				<p class="subtitle">
					<span id="vcreator">加载中...</span>/<span id="vcdate">加载中...</span>/<span
						id="vsize">加载中...</span> MB
				</p>
				<br />
				<!-- 播放窗口组件位置 -->
				<div id="playerbox" class="col-md-12">
					<p>加载中...</p>
				</div>
			</div>
		</div>

	</div>

</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/video.min.js"></script>
<script type="text/javascript">
	$(function() {
		var fileId = getFileId();
		$.ajax({
			url : 'homeController/playVideo.ajax',
			type : 'POST',
			dataType : 'text',
			data : {
				fileId : fileId
			},
			success : function(result) {
				if (result != "ERROR") {
					var f = eval("(" + result + ")");
					playVideo(f);
				} else {
					alert("错误：无法定位要预览的文件或该操作未被授权。");
					reMainPage();
				}
			},
			error : function() {
				alert("错误：请求失败，请刷新重试。");
				reMainPage();
			}
		});
	});
	//获取URL上的图片id参数，它必须是第一个参数。
	function getFileId() {
		var url = location.search;
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("=");
			return strs[1];
		}
		return "";
	}
	//显示视屏信息并播放视频
	function playVideo(f) {
		$("#vname").text(f.fileName);
		$("#vcreator").text(f.fileCreator);
		$("#vcdate").text(f.fileCreationDate);
		$("#vsize").text(f.fileSize);
		$("#playerbox")
				.html(
						"<video id='kiftplayer' class='video-js col-md-12' controls preload='auto' height='500'>"
								+ "<source src='fileblocks/"+f.filePath+"' type='video/mp4'>"
								+ "<source src='fileblocks/"+f.filePath+"' type='video/webm'>"
								+ "</video>");
		var player = videojs('kiftplayer');
		player.ready(function() {
			this.play();
		});
	}
	function reMainPage() {
		window.opener = null;
		window.open('', '_self');
		window.close();
	}
</script>
</html>